<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header">
			<view style="padding: 0 44rpx;box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view class="changeLan" @click="switchLanguage=true">{{$t('login.switchLanguage')}}</view>
		</view>
		<view class="body">
			<view class="title">Welcome to Only Rent !</view>
			<view class="info">{{$t('login.welcome')}}</view>
		</view>
		<view class="form-table">
			<view class="item-mobile">
				<view class="code" @click="changeCode">
					<view>+{{code}}</view>
					<view class="code-image">
						<image src="/static/images/icon/down-icon.png"></image>
					</view>
				</view>
				<view class="mobile-input">
					<u-input name="mobile" type="number" :placeholder="$t('login.inputMobilePlaceholder')" v-model="mobile" border="none" :clearable="true"></u-input>
				</view>
			</view>
			<view class="item-password" v-if="!useCode" :class="{'error-message-active':showPswError}">
				<input name="password" :placeholder="$t('login.inputPswPlaceholder')" v-model="password" border="none" :password="showPassword" placeholder-style="color:#c0c4cc" placeholder-class="custom-placeholder" />
				<image class="item-password-img" v-if="!showPassword" @click="changePassword" src="/static/images/icon/eyes.png" />
				<image class="item-password-img" v-if="showPassword" @click="changePassword" src="/static/images/icon/eyes-closed.png"/>
			</view>
			<view class="error-message-password" v-if="!useCode&&showPswError">
				{{$t('login.errTipsPsw')}}
			</view>
		</view>
		<view class="form-btn" v-if="useCode">
			<view :class="{'submit-btn': isInputEmpty, 'submit-btn-active': !isInputEmpty }" @click="loginCode" >
				{{$t('login.btnSmsCode')}}
			</view>
		</view>
		<view class="form-btn" v-else>
			<view :class="{'submit-btn': isInputEmpty, 'submit-btn-active': !isInputEmpty }" @click="loginPsw" >
				{{$t('login.btnLogin')}}
			</view>
		</view>
		<view class="footer" v-if="useCode">
			<view class="footer-info">
				<view class="type">{{$t('login.btnOther')}}</view>
				<view class="type-password" @click="changeLoginType">{{$t('login.btnUsePsw')}}</view>
			</view>
		</view>
		<view class="footer" v-else>
			<view class="footer-type-info">
				<view class="type-password" @click="changeLoginType">{{$t('login.btnLoginSms')}}</view>
				<view class="foget-psw" @click="fogetPsw">{{$t('login.btnFogetPsw')}}</view>
			</view>
		</view>
		<view class="policy" v-show="!switchLanguage">
			<view class="policy-info">
				{{$t('login.btnAgree')}}《 <view class="policy-link" @click="open">{{$t('login.linkPolicy')}}</view>》
			</view>
		</view>
		
		<!--語言切換-->
		<!-- <u-picker :show="switchLanguage" :columns="languageColumns" @confirm="changeLanguage" @cancel="switchLanguage=false"></u-picker> -->
		<view v-show="switchLanguage">
			<view class="language" >
				<view class="language-card">
					<view class="language-list">
						<view v-for="(item, index) in languageColumns" :key="index" class="language-item language-item-select">
							<view v-if="item.status" class="language-title" @click="changeLanguage(item.key)">
								{{item.title}}
							</view>
							<view v-else class="language-tips"> 
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="language-footer">
						<view class="language-item language-item-btn" @click="switchLanguage=false">Cancel</view>
					</view>
				</view>
			</view>
		</view>
		<!--語言切換结束-->
		
		
		<!--隐私协议-->
		<u-popup :show="showPolicy" :closeOnClickOverlay="false" mode="bottom" :round="48" style="position: relative;">
			<image src="/static/images/icon/close.png" style="width: 60rpx;height: 60rpx; position: absolute;right: 28rpx;top: 58rpx;" @click="close"></image>
			<view class="policy-title">
				Only Rent 用戶協議
			</view>
			<view class="policy-text">
				<scroll-view scroll-y="true" style="height: 65vh;">
					<u-parse :content="content"></u-parse>
				</scroll-view>
				
			</view>
		</u-popup>
		<!--隐私协议結束-->
		
		<!-- 自定義toast -->
		<custom-toast ref="toast" :title="toastMessage" image="/static/images/icon/success-circle.png" position="center" />
		<!-- 自定義toast結束 -->
	</view>
</template>

<script>
	import { passLogin, getUserInfo } from '@/config/api.js';
	
	export default {
		data() {
			return {
				switchLanguage:false,
				useCode:true,
				code: '886',
				mobile:'',
				password:'',
				isInputEmpty:true,
				showPolicy:false,
				languageColumns:[{
					key:'tw',
					title:'繁體中文',
					status:1
				},{
					key:'cn',
					title:'简体中文',
					status:0
				},{
					key:'en',
					title:'English',
					status:0
				}],
				index: 0,
				showPassword:true,
				showPswError:false,
				toastMessage:'',
				content:`<div style="color:#323438;font-size: 28rpx;font-weight: 500;">一.服務範圍</div>
						<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">本平台提供租賃服務，讓用戶可以方便地查找、發布、預訂和管理各類租賃物品及服務。我們的服務內容可能會根據平台發展進行調整或更新。</div>
						<div style="color:#323438;font-size: 28rpx;font-weight: 500;">二、用戶賬號</div>
						<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
							<p>用戶需註冊賬號才能使用本平台的某些功能。您應當提供真實、準確的資料並保持賬號信息的最新性。</p>
							<p>用戶應對賬號的所有活動負責，包括但不限於賬號的保密、登入、使用等。若發現賬號被未經授權使用，應立即通知本平台。</p>
							<p>用戶可隨時修改或刪除其賬號，但刪除賬號後，可能會導致無法使用本平台的部分功能，且已發布的租賃信息或交易記錄無法恢復。</p>
						</div>
						<div style="color:#323438;font-size: 28rpx;font-weight: 500;">三、蒐集之目的</div>
						<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
							<p>蒐集之目的在於進行行銷業務、消費者、客戶管理與服務、網路購物及其他電子商務服務及與調查、統計與研究分析(法定特定目的項目編號為Ｏ四Ｏ、Ｏ八一、Ｏ九Ｏ、Ｏ九一、Ｏ九八、Ｏ九九、一〇四、一〇七、一一八、一三五、一三六、一四八、一五二、一五七)。Marais將藉由加入會員之過程或進行交易之過程來蒐集個人資料。</p>
						</div>
						<div style="color:#323438;font-size: 28rpx;font-weight: 500;">四、服務條款</div>
						<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
							<p>用戶可在平台上發布租賃物品或服務，並根據平台規範設置價格、時間和條件。平台不對租賃物品的真實性或適用性負責。 租賃交易需遵守本平台的交易流程，並由雙方自行協商達成協議。</p>
							<p>所有支付均通過本平台進行，並受本平台的支付規範約束。若發生爭議或退款需求，將依據平台政策進行處理。</p>
						</div>
						<div style="color:#323438;font-size: 28rpx;font-weight: 500;">一.服務範圍</div>
								<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">本平台提供租賃服務，讓用戶可以方便地查找、發布、預訂和管理各類租賃物品及服務。我們的服務內容可能會根據平台發展進行調整或更新。</div>
								<div style="color:#323438;font-size: 28rpx;font-weight: 500;">二、用戶賬號</div>
								<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
									<p>用戶需註冊賬號才能使用本平台的某些功能。您應當提供真實、準確的資料並保持賬號信息的最新性。</p>
									<p>用戶應對賬號的所有活動負責，包括但不限於賬號的保密、登入、使用等。若發現賬號被未經授權使用，應立即通知本平台。</p>
									<p>用戶可隨時修改或刪除其賬號，但刪除賬號後，可能會導致無法使用本平台的部分功能，且已發布的租賃信息或交易記錄無法恢復。</p>
								</div>
								<div style="color:#323438;font-size: 28rpx;font-weight: 500;">三、蒐集之目的</div>
								<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
									<p>蒐集之目的在於進行行銷業務、消費者、客戶管理與服務、網路購物及其他電子商務服務及與調查、統計與研究分析(法定特定目的項目編號為Ｏ四Ｏ、Ｏ八一、Ｏ九Ｏ、Ｏ九一、Ｏ九八、Ｏ九九、一〇四、一〇七、一一八、一三五、一三六、一四八、一五二、一五七)。Marais將藉由加入會員之過程或進行交易之過程來蒐集個人資料。</p>
								</div>
								<div style="color:#323438;font-size: 28rpx;font-weight: 500;">四、服務條款</div>
								<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
									<p>用戶可在平台上發布租賃物品或服務，並根據平台規範設置價格、時間和條件。平台不對租賃物品的真實性或適用性負責。 租賃交易需遵守本平台的交易流程，並由雙方自行協商達成協議。</p>
									<p>所有支付均通過本平台進行，並受本平台的支付規範約束。若發生爭議或退款需求，將依據平台政策進行處理。</p>
								</div>
								<div style="color:#323438;font-size: 28rpx;font-weight: 500;">一.服務範圍</div>
										<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">本平台提供租賃服務，讓用戶可以方便地查找、發布、預訂和管理各類租賃物品及服務。我們的服務內容可能會根據平台發展進行調整或更新。</div>
										<div style="color:#323438;font-size: 28rpx;font-weight: 500;">二、用戶賬號</div>
										<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
											<p>用戶需註冊賬號才能使用本平台的某些功能。您應當提供真實、準確的資料並保持賬號信息的最新性。</p>
											<p>用戶應對賬號的所有活動負責，包括但不限於賬號的保密、登入、使用等。若發現賬號被未經授權使用，應立即通知本平台。</p>
											<p>用戶可隨時修改或刪除其賬號，但刪除賬號後，可能會導致無法使用本平台的部分功能，且已發布的租賃信息或交易記錄無法恢復。</p>
										</div>
										<div style="color:#323438;font-size: 28rpx;font-weight: 500;">三、蒐集之目的</div>
										<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
											<p>蒐集之目的在於進行行銷業務、消費者、客戶管理與服務、網路購物及其他電子商務服務及與調查、統計與研究分析(法定特定目的項目編號為Ｏ四Ｏ、Ｏ八一、Ｏ九Ｏ、Ｏ九一、Ｏ九八、Ｏ九九、一〇四、一〇七、一一八、一三五、一三六、一四八、一五二、一五七)。Marais將藉由加入會員之過程或進行交易之過程來蒐集個人資料。</p>
										</div>
										<div style="color:#323438;font-size: 28rpx;font-weight: 500;">四、服務條款</div>
										<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
											<p>用戶可在平台上發布租賃物品或服務，並根據平台規範設置價格、時間和條件。平台不對租賃物品的真實性或適用性負責。 租賃交易需遵守本平台的交易流程，並由雙方自行協商達成協議。</p>
											<p>所有支付均通過本平台進行，並受本平台的支付規範約束。若發生爭議或退款需求，將依據平台政策進行處理。</p>
										</div>
										<div style="color:#323438;font-size: 28rpx;font-weight: 500;">一.服務範圍</div>
												<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">本平台提供租賃服務，讓用戶可以方便地查找、發布、預訂和管理各類租賃物品及服務。我們的服務內容可能會根據平台發展進行調整或更新。</div>
												<div style="color:#323438;font-size: 28rpx;font-weight: 500;">二、用戶賬號</div>
												<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
													<p>用戶需註冊賬號才能使用本平台的某些功能。您應當提供真實、準確的資料並保持賬號信息的最新性。</p>
													<p>用戶應對賬號的所有活動負責，包括但不限於賬號的保密、登入、使用等。若發現賬號被未經授權使用，應立即通知本平台。</p>
													<p>用戶可隨時修改或刪除其賬號，但刪除賬號後，可能會導致無法使用本平台的部分功能，且已發布的租賃信息或交易記錄無法恢復。</p>
												</div>
												<div style="color:#323438;font-size: 28rpx;font-weight: 500;">三、蒐集之目的</div>
												<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
													<p>蒐集之目的在於進行行銷業務、消費者、客戶管理與服務、網路購物及其他電子商務服務及與調查、統計與研究分析(法定特定目的項目編號為Ｏ四Ｏ、Ｏ八一、Ｏ九Ｏ、Ｏ九一、Ｏ九八、Ｏ九九、一〇四、一〇七、一一八、一三五、一三六、一四八、一五二、一五七)。Marais將藉由加入會員之過程或進行交易之過程來蒐集個人資料。</p>
												</div>
												<div style="color:#323438;font-size: 28rpx;font-weight: 500;">四、服務條款</div>
												<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
													<p>用戶可在平台上發布租賃物品或服務，並根據平台規範設置價格、時間和條件。平台不對租賃物品的真實性或適用性負責。 租賃交易需遵守本平台的交易流程，並由雙方自行協商達成協議。</p>
													<p>所有支付均通過本平台進行，並受本平台的支付規範約束。若發生爭議或退款需求，將依據平台政策進行處理。</p>
												</div>
												<div style="color:#323438;font-size: 28rpx;font-weight: 500;">一.服務範圍</div>
														<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">本平台提供租賃服務，讓用戶可以方便地查找、發布、預訂和管理各類租賃物品及服務。我們的服務內容可能會根據平台發展進行調整或更新。</div>
														<div style="color:#323438;font-size: 28rpx;font-weight: 500;">二、用戶賬號</div>
														<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
															<p>用戶需註冊賬號才能使用本平台的某些功能。您應當提供真實、準確的資料並保持賬號信息的最新性。</p>
															<p>用戶應對賬號的所有活動負責，包括但不限於賬號的保密、登入、使用等。若發現賬號被未經授權使用，應立即通知本平台。</p>
															<p>用戶可隨時修改或刪除其賬號，但刪除賬號後，可能會導致無法使用本平台的部分功能，且已發布的租賃信息或交易記錄無法恢復。</p>
														</div>
														<div style="color:#323438;font-size: 28rpx;font-weight: 500;">三、蒐集之目的</div>
														<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
															<p>蒐集之目的在於進行行銷業務、消費者、客戶管理與服務、網路購物及其他電子商務服務及與調查、統計與研究分析(法定特定目的項目編號為Ｏ四Ｏ、Ｏ八一、Ｏ九Ｏ、Ｏ九一、Ｏ九八、Ｏ九九、一〇四、一〇七、一一八、一三五、一三六、一四八、一五二、一五七)。Marais將藉由加入會員之過程或進行交易之過程來蒐集個人資料。</p>
														</div>
														<div style="color:#323438;font-size: 28rpx;font-weight: 500;">四、服務條款</div>
														<div style="color:#6A707C;font-size: 24rpx;font-weight: 400;margin-bottom: 48rpx;margin-top:16rpx;">
															<p>用戶可在平台上發布租賃物品或服務，並根據平台規範設置價格、時間和條件。平台不對租賃物品的真實性或適用性負責。 租賃交易需遵守本平台的交易流程，並由雙方自行協商達成協議。</p>
															<p>所有支付均通過本平台進行，並受本平台的支付規範約束。若發生爭議或退款需求，將依據平台政策進行處理。</p>
														</div>`,
			}
		},
		watch: {
		    mobile(newVal) {
		      this.isInputEmpty = newVal.trim() === ''; // 根据input的值判断是否为空
			}
		},
		onLoad() {
			
		},
		methods: {
			changeLoginType(){
				this.mobile = '';
				this.useCode = !this.useCode;
			},
			open() {
				this.showPolicy = true
				// console.log('close');
			},
			close() {
				this.showPolicy = false
				// console.log('close');
			},
			loginCode(){
				uni.navigateTo({
					url: '/pages/index/vscode?code='+this.code+'&mob='+this.mobile
				});
			},
			loginPsw(){
				if(this.isInputEmpty){
					return;
				}
				if(this.password.trim() === '' ){
					this.showPswError = true;
					return;
				}
				this.sumbitLoginPsw();
			},
			fogetPsw(){
				uni.navigateTo({
					url: '/pages/index/foget'
				});
			},
			changeLanguage(e){
				console.log(e)
				// if( e == 'th' ){
				// 	return;
				// }
				this.$i18n.locale = e;
				this.switchLanguage = false;
				// this.toastMessage = '語言已變更';
				// this.$refs.toast.show();
			},
			changeCode(){
				let that = this;
				uni.navigateTo({
					url: '/pages/index/tel',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('code:', data);
							that.code = data.data;
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
			},
			changePassword(){
				this.showPassword = !this.showPassword;
				console.log(this.showPassword);
			},
			sumbitLoginPsw(){
				let that = this;
				let data = {
					code:this.code,
					mobile:this.mobile,
					password:this.password
				}
				passLogin(data).then((res) => {
					console.log('sucess', res)
					//success
					
					//保存登入token
					uni.setStorageSync('token', res.token);
					that.getUserInfo()
					this.toastMessage = '登入成功';
					this.$refs.toast.show();
					
				}).catch((e) =>{
					console.log('error', e)
					
					uni.showModal({
						title: '登入失敗',
						content: '號碼或密碼有誤，請檢查後再試',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							if (res.confirm) {
								console.log('確認');
							} else if (res.cancel) {
								console.log('取消');
							}
						}
					});
				})
			},
			getUserInfo(){
				getUserInfo().then((res) => {
					//success
					uni.setStorageSync('userInfo', res);//保存用戶信息
					uni.setStorageSync('userId', res.id);//保存用戶信息
					
					setTimeout(function(){
						uni.reLaunch({
							url: '/pages/home/index'
						});
					},1500);
				}).catch(() =>{
					
				})
			},
			goBack(){
				// uni.navigateBack();
				uni.switchTab({
					url: '/pages/home/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.header{
		width: 100%;
		// margin-top: 56rpx;
		display: flex;
		justify-content: space-between;
	}
	.changeLan{
		font-size: 32rpx;
		color: #323438;
		line-height: 80rpx;
		margin: 0 44rpx;
	}
	.body{
		width: 100%;
		margin-top: 154rpx;
		padding-left: 56rpx;	
		box-sizing: border-box;
	}
	.title{
		color: #1E232C;
		font-size: 60rpx;
		font-weight: 600;
		letter-spacing: -2rpx;
	}
	.info{
		color: #323438;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	.form-table{
		width: 100%;
		margin-top: 140rpx;
	}
	.item-mobile{
		box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgba(18,18,29,0.1);
		display: flex;
		justify-content: flex-start;
		margin: 0 56rpx;
		padding-bottom: 32rpx;
	}
	.code{
		display: flex;
		justify-content: flex-start;
	}
	.code-image{
		padding-top: 5rpx;
	}
	.code image{
		width: 32rpx;
		height: 32rpx;
		margin-left: 16rpx;
	}
	.mobile-input{
		margin-left: 16rpx;
		width: 100%;
	}
	.form-btn{
		margin-top: 56rpx;
		width: 100%;
		
	}
	.submit-btn{
		margin: 0 auto;
		width: 600rpx;
		height: 96rpx;
		background: #F7F8F9;
		box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.02);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #E5E6E8;
		text-align: center;
		line-height: 96rpx;
		font-size: 32rpx;
		color: #BEC0C5;
	}
	.submit-btn-active{
		margin: 0 auto;
		width: 600rpx;
		height: 96rpx;
		background: #27C5D6;
		box-shadow: 0rpx 4rpx 0rpx 0rpx rgba(0,0,0,0.04);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 2rpx solid #27C5D6;
		text-align: center;
		line-height: 96rpx;
		font-size: 32rpx;
		color: #fff;
	}
	.footer{
		width: 100%;
		padding-top: 56rpx;
	}
	.footer-info{
		display: flex;
		justify-content: center;
	}
	.type{
		font-size: 28rpx;
		color: #808690 ;
		margin-right:10rpx;
	}
	.type-password{
		color: #27C5D6;
		border-bottom: 2rpx solid #27C5D6;
		font-size: 28rpx;
	}
	.foget-psw{
		font-size: 28rpx;
		color: #323438;
		border-bottom: 2rpx solid #323438;
	}
	.item-password{
		margin-top: 88rpx;
		box-shadow: inset 0rpx -2rpx 0rpx 0rpx rgba(18,18,29,0.1);
		padding-bottom: 32rpx;
		margin: 58rpx 56rpx 0;
		// width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.item-password-img{
		width: 44rpx;
		height: 44rpx;
	}
	.footer-type-info{
		display: flex;
		justify-content: space-between;
		padding: 0 56rpx;
		box-sizing: border-box;
	}
	.custom-placeholder{
		color: #c0c4cc‌!important;
	}
	.policy{
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		text-align: center;
	}
	.policy-info{
		color: #323438;
		font-size: 24rpx;
		font-weight: 400;
	}
	.policy-link{
		display: inline;
		color: #020202;
		border-bottom: 2rpx solid #020202;
		font-weight: 500;
	}
	.policy-title{
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #323438;
		margin-top: 68rpx;
		font-weight: 500;
	}
	.policy-text{
		padding: 40rpx;
	}
	.error-message-active{
		box-shadow: inset 0rpx -2rpx 0rpx 0rpx #FF3D43!important;
	}
	.error-message-password{
		color: #FF3D43;
		font-size:24rpx;
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;
		padding: 0 56rpx;
	}
	.language{
		position: fixed; /* 固定定位 */
		top: 0;
		left: 0;
		width: 100%; /* 宽度100% */
		height: 100%; /* 高度100% */
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}
	.language-card{
		position: fixed;
		bottom: 68rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		width: 718rpx;
	}
	.language-list{
		
	}
	.language-list .language-item-select:first-of-type{
		border-radius: 24rpx 24rpx 0 0;
	}
	.language-list .language-item-select:last-of-type{
		border-radius: 0 0 24rpx 24rpx;
		border-bottom:0;
	}
	.language-item{
		padding: 34rpx 0;
		background: rgba(255, 255, 255, 0.7);
		text-align: center;
		// margin: 0.5rpx auto;
		border-bottom:1rpx solid #ABABAB;
	}
	.language-title{
		color: #007AFF;
		font-size: 34rpx;
	}
	.language-tips{
		font-size: 34rpx;
		color: #AEAEAE;
	}
	.language-footer{
		margin-top: 16rpx;
	}
	.language-item-btn{
		font-weight: 600;
		color: #007AFF;
		border-radius: 24rpx;
	}
</style>
